<template>
  <div class="Freedom">
    <div class="app-wrap">
      <div class="free-title">
        <div class="txt">
          所有应用
        </div>
        <div class="line"></div>
      </div>
      <div class="app-list">
        <div v-for="item in list" :key="item.key" class="app-item">
          <div class="app-sec">
            {{item.value}}
          </div>
          <div class="check-circle">
            <div class="check"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api'
import { swipeTabs } from '@/consts/mock'
export default {
  data() {
	  return {
      list: swipeTabs,
	  }
  },
  methods: {
        
    // // 4.5.1、查看应用分组和列表
    async getRegisterList() {
      const { code, data } = await api.app(this).appGroupList({
        org_id: Cookies.get('organization_id'),
        group_id: '',
      })
      if (code === 0) {
        this.registerList = data
      }
    },
  },
}
</script>

<style lang="stylus">
.Freedom {
  .app-wrap {
    box-sizing: border-box;
    padding-top: getPx(56);
    width: getPx(1076);
    height: getPx(883);
    background-color: $white;
    box-shadow: 0 getPx(8) getPx(8) 0 rgba(0, 0, 0, 0.08);
    .free-title {
      margin: 0 auto getPx(56);
      width: getPx(94 + 14 + 795);
      height: getPx(29);
      flexMiddle(flex-start);
      .txt {
        width: getPx(94);
        color: $sec-tit-color;
        font-size: $sec-title-font-size;
        margin-right: getPx(14); 
      }
      .line {
        height: 1px;
        width: getPx(795);
        background: $primary;
      }
    }
    .app-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-row-gap: getPx(105);
      .app-item  {
        position: relative;
        width: 100%;
        height: 100%;
        flexMiddle(center);
        .app-sec {
          width: getPx(226);
          height: getPx(301);
          padding-bottom: getPx(16);
          box-sizing: border-box;
          background-color: #efefef;
          box-shadow: 0 getPx(8) getPx(8) 0 rgba(0, 0, 0, 0.1);
          cursor: pointer;
          flex-direction: column;
          flexMiddle(flex-end);
        }
        .check-circle {
          width: getPx(30);
          height: getPx(30);
          position: absolute;
          top: getPx(15);
          right: getPx(80);
          cursor: pointer;
        }
      }
      
    }
  }
}
</style>